<template>
  <div>
    <div class="title">热门城市</div>
    <one-third :dataList="hotCityList"/>
    <div class="title">字母排序</div>
    <one-sixth :divide="6" :dataList="letterList" @click="litterClickHandler"/>
    <div v-for="(list, letter) of citySortByLetterShow" :key="letter">
      <div :ref="letter" class="title">{{letter}}</div>
      <one-fourth :divide="4" :dataList="list"/>
    </div>
  </div>
</template>

<script>
import OneThird from './OneThird'
import OneSixth from './OneSixth'
import OneFourth from './OneFourth'
export default {
  name: 'CityBody',
  props: {
    cityData: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      area: 'china'
    }
  },
  computed: {
    hotCity () {
      let hotCity = {china: [], abroad: []}
      const cityData = this.cityData
      f(cityData.china, hotCity.china)
      f(cityData.abroad, hotCity.abroad)
      return hotCity

      function f (a, b) {
        if (a && a.hot) {
          a.hot.forEach((val) => {
            b.push(val)
          })
        }
      }
    },
    hotCityList () {
      return this.hotCity[this.area]
    },
    letter () {
      let letter = {china: [], abroad: []}
      const cityData = this.cityData
      f(cityData.china, letter.china)
      f(cityData.abroad, letter.abroad)
      return letter

      function f (a, b) {
        if (a) {
          for (let prop in a) {
            if (a.hasOwnProperty(prop)) {
              prop = prop.toUpperCase()
              if (prop.length === 1 && prop >= 'A' && prop <= 'Z') {
                b.push(prop)
              }
            }
          }
        }
      }
    },
    letterList () {
      return this.letter[this.area]
    },
    citySortByLetter () {
      let citySortByLetter = {china: {}, abroad: {}}
      const cityData = this.cityData
      f(cityData.china, citySortByLetter.china)
      f(cityData.abroad, citySortByLetter.abroad)
      return citySortByLetter

      function f (a, b) {
        if (a) {
          for (let prop in a) {
            if (a.hasOwnProperty(prop)) {
              if (prop.length === 1 && prop.toUpperCase() >= 'A' && prop.toUpperCase() <= 'Z' && a[prop]) {
                b[prop] = a[prop]
              }
            }
          }
        }
      }
    },
    citySortByLetterShow () {
      return this.citySortByLetter[this.area]
    }
  },
  methods: {
    litterClickHandler (letter) {
      let el = this.$refs[letter][0]
      scrollTo(0, el.offsetTop)
    }
  },
  mounted () {
    let this_ = this
    this.bus.$on('area-change', (area) => {
      this_.area = area
    })
  },
  components: {
    OneThird,
    OneSixth,
    OneFourth
  }
}
</script>

<style lang="stylus" scoped>
.title
  text-indent: .3rem
  height: .72rem
  line-height: .72rem
  font-size: .24rem
  color: #212121
  background: #F5F5F5
</style>
